<template>
  <div class="select-seat-header-container">
    <nut-cell>
      <div class="content">
        <div class="left">
          <div class="title">{{info.film_name}}</div>
          <div class="desc">开场时间：{{info.show_time}}</div>
        </div>
        <div class="right">
          <div class="icon">
            <Clock color="#858a99" size="0.6rem"></Clock>
          </div>
          <div class="distance">{{info.duration}}分钟</div>
        </div>
      </div>
    </nut-cell>
  </div>
</template>
<script setup lang="ts">
import { Clock } from "@nutui/icons-vue-taro";
import { toRefs } from "vue";

const props = defineProps({
  info: {
    type: Object,
    required: true,
  },
});
const { info } = toRefs(props);
</script>
<style lang="scss">
.select-seat-header-container {
  display: flex;
  flex-direction: column;
  padding: 0 25px;
  background: #fff;
  .content {
    display: flex;
    flex-direction: row;
    height: 100px;
    width: 100%;
    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-right: 35px;
      .title {
        font-weight: 500;
        color: #15181d;
        font-size: 32px;
      }
      .desc {
        color: #858a99;
        font-size: 24px;
        margin-top: 10px;
      }
      .title,
      .desc {
        display: -webkit-box;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .right {
      display: flex;
      flex-direction: row;
      align-items: center;
      .icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
      }
      .distance {
        color: #858a99;
        font-size: 24px;
        .nut-price {
          color: #858a99;
        }
      }
    }
  }
}
</style>
